﻿import UploadComponent from '@/components/Selfdefine/UploadComponent.vue'
import axios from 'axios'
export default {
  components: {UploadComponent},
  props: ['dialogInfo'],
  data () {
    return {
      dialogTitle: '生成连接串',
      dialogFormVisible: false,
      labelWidth: '132px',
      dialogLoading: false,
      // 上传文件部分
      actionUrl: `${$URL.IMG_UPLOAD_URL}`,
      fileList: [],
      fileReader: '',
      sourceCategoryList: [], // 数据源类型
      // 表单部分
      ruleForm: {
        category: '',
        server_addr: '',
        server_port: '',
        db_name: '',
        id: '',
        pw: '',
        sqlite_file: ''
      },
      // 表单规则部分
      rules: {
        category: [
          {required: true, message: '连接类型不能为空', trigger: 'blur'}
        ],
        server_addr: [
          {required: true, message: '目标服务器地址或IP不能为空', trigger: 'change'}
        ],
        db_name: [
          {required: true, message: '目标数据库名称不能为空', trigger: 'blur'}
        ],
        id: [
          {required: true, message: '访问账号不能为空', trigger: 'change'}
        ],
        pw: [
          {required: true, message: '访问密码不能为空', trigger: 'blur'}
        ],
        sqlite_file: [
          {required: true, message: 'Sqlite文件不能为空', trigger: 'change'}
        ]
      }
    }
  },
  created () {
    this.initDialog()
    // 获取下拉框的数据源
    this.getAllSourceCategoryInfo()
  },
  mounted () {
    if (!window.FileReader) {
      this.$message({
        message: '您的浏览器不支持 FileReader API',
        type: 'warning'
      })
    } else {
      this.fileReader = new FileReader()
    }
  },
  methods: {
    // 初始化表单时
    initDialog () {
      if (this.dialogInfo.category) {
        this.ruleForm.category = this.dialogInfo.category
      }
      this.ruleForm.sqlite_file = ''
      this.fileList = []
    },
    // 上传文件超过最大上传个数时
    onExceed () {
      let msg = '最多只能上传一个文件'
      this.$message({
        message: msg,
        type: 'warning'
      })
    },
    removeUpload () {
      this.ruleForm.sqlite_file = ''
      this.fileList = []
    },
    // 上传文件、图片的方法
    submitUpload (options) {
      let file = options.file
      let filename = file.name
      if (file) {
        this.fileReader.readAsDataURL(file)
        this.ruleForm.sqlite_file = file
      }
    },
    // 获取所有数据源类型
    getAllSourceCategoryInfo () {
      this.$get('/data_source/category').then((data) => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.sourceCategoryList = dataResult.data
        } else {
          this.$message({
            message: dataResult.msg,
            type: 'warning'
          })
        }
      }).catch((error) => {
        this.$message({
          message: error,
          type: 'error'
        })
      })
    },
    // formData的形式生成连接串
    buildConnectStrMethod_sqlite () {
      this.dialogLoading = true
      let formData = new FormData()
      formData.append('sqlite_file', this.ruleForm.sqlite_file)
      formData.append('category', this.ruleForm.category)
      axios({
        url: $URL.CENTER_API + '/icpdatasource/builder_connectstr',
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()
        },
        data: formData
      }).then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          let toParent = {
            category: this.ruleForm.category,
            connect_str: dataResult.data
          }
          this.$emit('buildStrSuccess', toParent)
        } else {
          this.$message({
            type: 'error',
            message: dataResult.msg
          })
        }
        this.dialogLoading = false
      }).catch(error => {
        this.dialogLoading = false
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    // 生成连接串的方法
    buildConnectStrMethod () {
      this.dialogLoading = true
      this.$post('/icpdatasource/builder_connectstr', {
        category: this.ruleForm.category,
        server_addr: this.ruleForm.server_addr,
        server_port: this.ruleForm.server_port,
        db_name: this.ruleForm.db_name,
        id: this.ruleForm.id,
        pw: this.ruleForm.pw,
        sqlite_file: ''
      }).then(data => {
        let dataResult = data.data.result
        if (dataResult.code === 'success') {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          let toParent = {
            category: this.ruleForm.category,
            connect_str: dataResult.data
          }
          this.$emit('buildStrSuccess', toParent)
        } else {
          this.$message({
            type: 'error',
            message: dataResult.msg
          })
        }
        this.dialogLoading = false
      }).catch(error => {
        this.dialogLoading = false
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    // 点击弹窗的取消按钮
    resetForm (forms) {
      this.$refs[forms].clearValidate()
      this.$emit('buildStrReset')
    },
    closeDialog () {
      this.$refs.ruleForm.clearValidate()
      this.$emit('buildStrReset')
    },
    // 点击弹窗的确定按钮
    submitForm (forms) {
      this.$refs[forms].validate((valid) => {
        if (valid) {
          if (this.ruleForm.category === 'Sqlite') {
            this.buildConnectStrMethod_sqlite()
          } else {
            this.buildConnectStrMethod()
          }
        } else {
          return false
        }
      })
    }
  },
  watch: {
    'dialogInfo.dialogFormVisible': {
      handler: function (val, oldVal) {
        this.dialogFormVisible = val
        if (val) {
          this.initDialog()
        }
      },
      deep: true
    }
  }
}
